<template>
	<view class="near">
		
	
				
				
		<u-navbar :is-back="false" :border-bottom="false" back-icon-color="#fff" title="附近氧站" title-size="36" title-color="#fff"
			:background="background">
			
			<view class="slot-wrap">
				<image @click="goback" class="back" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/21.png" mode=""></image>
			</view>
		</u-navbar>
		<view class="content">
			<image class="deco" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/14.png" mode="widthFix"></image>
			<view class="info">
				<view class="list">
					<view class="item" v-for="item in 8">
						<view class="iteminner">
							<img class="img" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/20.png" alt="">
							<view class="detail">
								<view class="name">
									<view class="left">
										格桑酒店前台
									</view>
									<view class="right">
										距离500M
									</view>
								</view>
								<view class="mid">
									<view class="left">
										<view class="addr">
											<img class="icon" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/16.png" alt="">
											拉萨市林廓北路南102号
										</view>
										<view class="time">
											<img class="icon" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/17.png" alt="">
											08:30-23:50
										</view>
									</view>
									<view class="right">
										<image class="dh" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/15.png" mode="widthFix"></image>
									</view>
								</view>
								
							</view>
						</view>
						<view class="bottoms">
							<view class="left">
								共有12个
							</view>
							<view class="right">
								<view class="same2">
									<image class="icon" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/18.png" mode=""></image>
									可租借 8 罐氧气
								</view>
								<view class="same1">
									<image class="icon" src="https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/19.png" mode=""></image>
									可归还 4 个空槽
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {

					background: 'url(https://ysy001.oss-cn-beijing.aliyuncs.com/ysyIco/9.png) no-repeat',
					// 还可以设置背景图size属性
					backgroundSize: 'cover',
					// 渐变色
					// backgroundImage: 'linear-gradient(180deg, #417CF4 0%, #84ACFF 100%)'
				}
			}
		},
		onReady() {
			uni.hideTabBar();
		},
		methods:{
			goback(){
				uni.reLaunch({
					url:"/pages/sys/main/index"
				})
			}
		},
		onLoad() {

		}
	}
</script>

<style scoped lang="scss">
	
	
	
	.back{
		width: 30rpx;
		height: 46rpx;
		margin-left: 40rpx;
	}
	.content {
		background: #EDF6FF;
		position: relative;

		.deco {
			position: absolute;
			top: -1px;
			width: 100%;
		}
		.info{
			margin: 0 27rpx;
			min-height: 400px;
			
			.list{
				padding-top: 16px;
				.item{
					padding: 38rpx 36rpx 36rpx;
					background: #FFFFFF;
					border-radius: 11rpx 11rpx 11rpx 11rpx;
					margin-bottom: 32rpx;
				}
				.bottoms{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						width: 144rpx !important;
						text-align: center;
						font-size: 24rpx;
						color: #a4a4a4;
						margin-right: 29rpx;
					}
					.right{
						flex: 1;
						display: flex;
						align-items: center;
						
						.same2{
							display: flex;
							align-items: center;
							
							padding: 6rpx 22rpx 6rpx 11rpx;
							background: #E6FFE5;
							border: 1rpx solid #60D990;
							border-radius: 10rpx;
							font-size: 21rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #08B878;
							margin-right: 10rpx;
							.icon{
								width: 22rpx;
								height: 19rpx;
								margin-right: 12rpx;
							}
						}
						.same1{
								padding: 6rpx 22rpx 6rpx 11rpx;
							background: #DDE7FF;
							border: 1rpx solid #81A4FF;
							border-radius: 10rpx;
							font-size: 21rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #1B6BE3;
							.icon{
								width: 22rpx;
								height: 19rpx;
								margin-right: 15rpx;
							}
						}
					}
				}
				.iteminner{
					
					// overflow: hidden;
					display: flex;
					
					.img{
						width: 144rpx !important;
						height: 144rpx !important;
						border-radius: 11rpx 11rpx 11rpx 11rpx;
						margin-right: 29rpx;
					}
					.detail{
						width: 500rpx;
						flex: 1;
						.name{
							
							display: flex;
							align-items: center;
							justify-content: space-between;
							.left{
								font-size: 32rpx;
								color: #333;
							}
							.right{
								font-size: 24rpx;
								color: #999;
							}
						}
						.mid{
							padding: 25rpx 0 0 0;
							display: flex;
							.left{
								flex: 1;
								font-size: 23rpx;
								color: #333333;
								.addr{
									padding-bottom: 17rpx;
									display: flex;
									align-items: center;
									.icon{
										width: 24rpx;
										height: 29rpx;
										margin-right: 13rpx;
									}
								}
								.time{
									padding-bottom: 35rpx;
									display: flex;
									align-items: center;
									.icon{
										width: 24rpx;
										height: 24rpx;
										margin-right: 13rpx;
										
									}
								}
							}
							.right{
								margin-top: -10rpx;
								.dh{
									width: 90rpx;
									height: 90rpx;
								}
							}
						}
					}
					
				}
			}
		}
	}
</style>
